<template>
	<view class="page-container back-grey-light">
		<view class="row-box sb back-white prow-l item-b bb">
			<text>店铺头像</text>
			<button class="row-box" :plain="true" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u-avatar :style="{height: 108+'rpx'}" :size="108" :src="merchant.icon"></u-avatar>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</button>
		</view>
		<view class="row-box sb back-white prow-l item mb-base" @click="openNameEdit()">
			<text>店铺名称</text>
			<view class="row-box">
				<text class="grey-light">{{ merchant.name }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		<view class="row-box sb back-white prow-l item" @click="openGivePriceEdit()">
			<text>起送费</text>
			<view class="row-box">
				<text class="grey-light">￥{{ merchant.givePrice }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		<view class="row-box sb back-white prow-l item" @click="openTimeSelect(0)">
			<text>营业开始时间</text>
			<view class="row-box">
				<text class="grey-light">{{ merchant.beginTime }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		<view class="row-box sb back-white prow-l item" @click="openTimeSelect(1)">
			<text>营业结束时间</text>
			<view class="row-box">
				<text class="grey-light">{{ merchant.endTime }}</text>
				<u-icon class="ml-base" name="arrow-right" color="#ddd" size="32"></u-icon>
			</view>
		</view>
		
		<u-picker mode="time" v-model="showTime" :params="params" :title="`请选择营业${type?'结束':'开始'}时间`"
			:confirm-color="primaryColor" :default-time="defaultTime" @confirm="selectTime">
		</u-picker>
	</view>
</template>

<script>
	import env from '@/utils/env.js'
	export default {
		data() {
			return {
				qntoken: '',  // 七牛云上传token
				merchant: {}, // 店铺信息
				// id: '', // 商家id
				// name: '', // 店铺名字
				// icon: '', // 店铺头像
				// givePrice: '', // 起送费
				// beginTime: '', // 营业开始时间
				// endTime: '', // 营业结束时间
				showTime: false, // 是否打开营业时间选择
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				}, // 选择器参数
				defaultTime: '08:00', // 默认时间
				type: 0, // 营业时间选择
			};
		},
		onLoad(options) {
			this.merchant = JSON.parse(options.merchant)
			// 获取七牛上传使用TOKEN
			this.getUploadToken()
		},
		methods: {
			// 选择微信头像回调
			onChooseAvatar(e) {
				let avatarUrl = e.detail.avatarUrl
				console.log('avatarUrl', avatarUrl)
				this.uploadAvatar(avatarUrl)
			},
			// 上传头像
			uploadAvatar(avatarUrl) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let pathArr = avatarUrl.split('.')
				let extra = pathArr[pathArr.length-1]
				// 获得唯一标识码
				let uniqueCode = this.generateUUID()
				uni.uploadFile({
					url: 'https://up-z2.qiniup.com',
					filePath: avatarUrl,
					name: 'file',
					formData: {
						'key': uniqueCode + '.' + extra,
						'token': this.qntoken,
					},
					success: (res) => {
						console.log('uni.uploadFile', res)
						let strToObj = JSON.parse(res.data)
						let backUrl = env.imageUrl + strToObj.key
						// 修改头像
						this.$api.UpdateMerchantInfo({
							id: this.merchant.id,
							icon: backUrl
						}).then(res => {
							console.log('UpdateMerchantInfo-success', res)
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '修改成功！',
									success: () => {
										this.merchant.icon = backUrl
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							console.log('UpdateMerchantInfo-fail', err)
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '上传出错，修改失败！'
							})
						})
					},
					fail: (err) => {
						console.log('uni.uploadFile', err)
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '上传出错，修改失败！'
						})
					}
				})
			},
			
			// 打开店铺名称输入模态框
			openNameEdit() {
				uni.showModal({
					placeholderText: '请输入店铺名称',
					editable: true,
					confirmText: '确定',
					confirmColor: this.primaryColor,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '上传中...',
								mask: true
							})
							this.$api.UpdateMerchantInfo({
								id: this.merchant.id,
								name: res.content
							}).then(res2 => {
								console.log('UpdateMerchantInfo-success', res2)
								uni.hideLoading()
								if (res2.data.code == 200) {
									uni.showToast({
										icon: 'none',
										title: '修改成功！',
										success: () => {
											this.merchant.name = res.content
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.data.msg
									})
								}
							}).catch(err => {
								console.log('UpdateMerchantInfo-fail', err)
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '网络出错，修改失败！'
								})
							})
						}
					}
				})
			},
			
			// 打开起送费输入模态框
			openGivePriceEdit() {
				uni.showModal({
					placeholderText: '请输入起送费',
					editable: true,
					confirmText: '确定',
					confirmColor: this.primaryColor,
					success: (res) => {
						if (res.confirm) {
							if(!this.priceReg.test(res.content)) {
								return uni.showToast({
									icon: 'none',
									title: '格式有误，请重新输入！'
								})
							}
							uni.showLoading({
								title: '上传中...',
								mask: true
							})
							this.$api.UpdateMerchantInfo({
								id: this.merchant.id,
								givePrice: Number(res.content)
							}).then(res2 => {
								console.log('UpdateMerchantInfo-success', res2)
								uni.hideLoading()
								if (res2.data.code == 200) {
									uni.showToast({
										icon: 'none',
										title: '修改成功！',
										success: () => {
											this.merchant.givePrice = res.content
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.data.msg
									})
								}
							}).catch(err => {
								console.log('UpdateMerchantInfo-fail', err)
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '网络出错，修改失败！'
								})
							})
						}
					}
				})
			},
			
			// 打开时间选择器
			openTimeSelect(type) {
				this.type = type
				this.defaultTime = type?this.merchant.endTime:this.merchant.beginTime
				this.showTime = true
			},
			// 选择时间
			selectTime(e) {
				console.log('选择时间', e)
				let time = e.hour + ':' + e.minute
				let params = {
					id: this.merchant.id
				}
				if (this.type==0) { // 营业开始时间
					params['beginTime'] = time
				} else { // 营业结束时间
					params['endTime'] = time
				}
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				this.$api.UpdateMerchantInfo(params).then(res => {
					console.log('UpdateMerchantInfo-success', res)
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功！',
							success: () => {
								if (this.type==0) { // 营业开始时间
									this.merchant.beginTime = time
								} else { // 营业结束时间
									this.merchant.endTime = time
								}
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('UpdateMerchantInfo-fail', err)
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '网络出错，修改失败！'
					})
				})
			}
		},
	}
</script>

<style lang="scss">
.page-container {
	
	.row-box {
		&.item-b {
			height: 168rpx;
		}
		&.item {
			height: 104rpx;
		}
		&.bb {
			border-bottom: 1rpx solid #f2f2f2;
		}
	}
}
</style>
